<script setup>
import {
  auditStudentInternshipMaterialApi,
  checkStudentNineYeInfoApi,
  checkStudentWeeklyApi,
  getStudentByClassApi,
  getStudentEmploymentMaterialApi,
  getStudentWeeklyByCounselorApi,
  getStudentWeeklyByCounselorInfoApi,
  uploadStudentInternshipMaterialsApi
} from '@/api/job'
import { utils, writeFileXLSX, read } from 'xlsx'
import { dayFormat } from '@/utils/common/dayjs'

import Form from '@/components/User/Form.vue'
import Pagization from '@/components/common/pagization.vue'
import Table from '@/components/employment/table.vue'
import { showStatusMessage } from '@/utils/common/showMessage'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import axios from 'axios'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'
const route = useRoute()

const userStore = useUserStore()
// **********************筛选表**********************
const formData = ref({
  account: '',
  class: '',
  name: ''
})
// 班级tab
const activeClass = ref(userStore.userInfo.class[0])
// 将状态常量提取出来
const STATUS = {
  PENDING: 0,
  REJECTED: 1,
  APPROVED: 2
}

// 将表单配置提取为常量
const FORM_CONFIG = {
  formModel: [
    {
      prop: 'account',
      label: '账号',
      type: 'input',
      placeholder: '请输入账号'
    },
    {
      prop: 'class',
      label: '班级',
      type: 'input',
      placeholder: '请输入班级'
    },
    {
      prop: 'name',
      label: '姓名',
      type: 'input',
      placeholder: '请输入姓名'
    }
  ],
  btnOpt: [
    {
      name: '查询',
      btnType: 'primary',
      prop: 'query',
      icon: 'Search'
    },
    {
      name: '重置',
      btnType: 'info',
      prop: 'reset',
      icon: 'RefreshRight'
    },
    {
      name: '名单导出',
      btnType: 'success',
      prop: 'export'
    }
  ]
}

/**
 * 点击重置按钮
 */
function reset() {
  getTableData()
  pagizationRef.value.reset()
  selectFormRef.value.reset()
}
//******************* */ 分页先关的***************
const pagizationRef = ref(null)
const selectFormRef = ref(null)
const pagizationToatl = ref(null)
/**
 * 获取表格数据
 */
async function getTableData(data) {
  let res = ''
  if (userStore.userInfo.class != '*') {
    res = await getStudentWeeklyByCounselorInfoApi({
      studentClass:activeClass.value,
      ...data,
    })
  } else {
    res = await getStudentWeeklyByCounselorInfoApi({
      ...data
    })
  }

  tableData.value = res.data?.map((item) => {
    return {
      ...item
    }
  })
  pagizationToatl.value = res.total
  showStatusMessage(res)
}
getTableData()

/**
 * 表单按钮点击事件
 * @param type 操作类型
 * @param data 表单数据
 */
function handleForm(type, data) {
  // console.log(type, data)
  switch (type) {
    case 'query':
      query(data)
      break
    case 'export':
      handlEexport()
      break
    case 'reset':
      reset(data)
      break
    case 'import':
      handleUpload(data)
      break
    case 'submit':
      handleSubmit(data)
      break
    default:
      break
  }
}

/**
 * 表单查询事件
 * @param {Object} data 查询条件
 */
const queryData = ref(null)
async function query(data) {
  console.log(data)
  getTableData(data)
}

// 列表数据
const tableData = ref([])

// 优化表格列配置
const columns = [
  {
    prop: 'studentAccount',
    label: '账号',
    width: '100'
  },
  {
    prop: 'studentName',
    label: '姓名',
    width: '100'
  },
  {
    prop: 'studentCollege',
    label: '学院',
    width: '150'
  },
  {
    prop: 'studentMajor',
    label: '专业',
    width: '150'
  },
  {
    prop: 'studentClass',
    label: '班级',
    width: '120'
  },
  {
    prop: 'studentMaterialDesc',
    label: '材料名称',
    width: '120'
  },

  {
    prop: 'studentMaterial',
    label: '附件下载',
    width: '100',
    display: 'button'
  },
  {
    prop: 'materialView',
    label: '附件预览',
    width: '100',
    display: 'button'
  },
  {
    prop: 'status',
    label: '状态',
    width: '100',
    display: 'tag'
  }
]
const uncolumns = [
  {
    prop: 'studentAccount',
    label: '账号',
    width: '100'
  },
  {
    prop: 'studentName',
    label: '姓名',
    width: '100'
  },
  {
    prop: 'studentClass',
    label: '班级',
    width: '150'
  },
  {
    prop: 'materialName',
    label: '就业材料名称',
    width: '150'
  }
]

// 状态相关的常量和工具函数
const STATUS_CONFIG = {
  [STATUS.PENDING]: {
    text: '待审核',
    type: 'warning'
  },
  [STATUS.REJECTED]: {
    text: '已驳回',
    type: 'danger'
  },
  [STATUS.APPROVED]: {
    text: '已通过',
    type: 'success'
  }
}

const getStatusText = (status) => STATUS_CONFIG[status]?.text || '未知状态'
const getStatusType = (status) => STATUS_CONFIG[status]?.type || 'info'

// 优化操作按钮配置 - 允许二次操作
const options = [
  {
    label: '驳回',
    type: 'danger',
    prop: 'noprocess',
    icon: 'Close',
    // 已驳回状态下不显示驳回按钮
    show: (row) => row.status !== STATUS.REJECTED || row.status === STATUS.APPROVED
  },
  {
    label: '通过',
    type: 'success',
    prop: 'processs',
    icon: 'Check',
    // 已通过状态下不显示通过按钮
    show: (row) => row.status !== STATUS.APPROVED || row.status === STATUS.REJECTED
  }
]

const docPreview = ref('')
const dialogViewVisible = ref(false)
const previewType = ref('') // 用于区分文件类型
const router = useRouter()
// 修改文件预览处理函数
async function handletTableMaterialView(value) {
  router.push({
    path: '/weeklyJournalDetail',
    state: {
      data: JSON.stringify(value.studentMaterial),
      type: 'studentMaterial'
    }
  })
}

// 修改对话框关闭处理函数
function handleDialogViewClose() {
  docPreview.value = ''
  previewType.value = ''
  // 如果是 docx，需要释放创建的 URL
  if (previewType.value === 'docx') {
    URL.revokeObjectURL(docPreview.value)
  }
}

// 材料审核****通过
async function handletTableProcess(data) {
  try {
    const res = await checkStudentNineYeInfoApi({
      id: data.id,
      status: STATUS.APPROVED
    })
    showStatusMessage(res)
    getTableData()
  } catch (error) {
    ElMessage.error('审核失败，请稍后重试')
  }
}

const rejectReason = ref('')
const ruleFormRef = ref(null)
const ruleForm = ref({
  rejectReason: ''
})
const descRules = {
  rejectReason: [{ required: true, message: '请输入驳回原因', trigger: 'blur' }]
}
const rejectId = ref(null)
function handleReject() {
  ruleFormRef.value.validate(async (valid) => {
    if (!valid) return

    const res = await checkStudentNineYeInfoApi({
      id: rejectId.value,
      status: STATUS.REJECTED,
      desc: ruleForm.value.rejectReason
    })
    showStatusMessage(res)
    getTableData()
    rejectId.value = null
    ruleForm.value.rejectReason = ''
    dialogViewVisible.value = false
  })
}
async function handletTableNoProcess(data) {
  dialogViewVisible.value = true
  rejectId.value = data.id
}

const drawerIsShow = ref(false)
const drawerTitle = ref('')
const drawerData = ref({})
// 查看学生实习周记
function handletTableViewWeekly(data) {
  console.log(data)
  drawerTitle.value = `${data.name}的${data.weekly}实习周记`
  drawerData.value = data
  drawerIsShow.value = true
}
function handleClose() {
  drawerTitle.value = ''
  drawerData.value = {}
  drawerIsShow.value = false
}

// 处理重新审核
async function handleReaudit(data) {
  try {
    const res = await checkStudentNineYeInfoApi({
      id: data.id,
      status: STATUS.PENDING // 重置为待审核状态
    })
    showStatusMessage(res)
    getTableData()
  } catch (error) {
    ElMessage.error('重新审核失败，请稍后重试')
  }
}
async function handleStudentMaterial(data) {
  try {
    const { studentMaterial, studentName, studentMaterialDesc } = data
    const response = await fetch(studentMaterial)

    if (!response.ok) {
      throw new Error('文件下载失败')
    }

    const contentType = response.headers.get('content-type')
    const fileName = `${studentName}的${studentMaterialDesc}`

    downloadFile(studentMaterial, fileName, contentType)
  } catch (error) {
    console.error('下载文件失败:', error)
    ElMessage.error('下载文件失败，请稍后重试')
  }
}

/**
 * 表格的操作事件
 * @param {Object} data  操作行的数据
 * @param {String} type 操作类型-'edit'-'delete'
 */
function handleTable(data, type) {
  console.log(data, type)
  switch (type) {
    case 'materialView':
      handletTableMaterialView(data)
      break
    case 'processs':
      handletTableProcess(data)
      break
    case 'noprocess':
      handletTableNoProcess(data)
      break
    case 'viewWeekly':
      handletTableViewWeekly(data)
      break
    case 'reaudit':
      handleReaudit(data)
      break
    case 'studentMaterial':
      handleStudentMaterial(data)
      break

    default:
      break
  }
}
// 分页器条数发生变化
function handleSizeChange(val) {
  console.log(val)

  const data = selectFormRef.value.getValue()
  switch (submitStatus.value) {
    case '已提交':
      getTableData({ size: val, ...data })
      break
    case '未提交':
      getUnSubmitData({ size: val })
      break

    default:
      break
  }
  pagizationRef.value.reset()
}
// 分页器页数发生变化
function handleCurrentChange(page, size) {
  const data = selectFormRef.value.getValue()
  console.log('页数发生变化')
  switch (submitStatus.value) {
    case '已提交':
      getTableData({ page, size, ...data })
      break
    case '未提交':
      getUnSubmitData({ page, size })
      break

    default:
      break
  }
}

// 弹窗显示
const dialogTableVisible = ref(false)
const FormJobData = ref({
  studentMaterialDesc: '',
  studentMaterial: ''
})
const formJobOpt = [
  {
    prop: 'studentMaterialDesc',
    label: '实现材料名称',
    type: 'input',
    disabled: true
  },
  {
    prop: 'studentMaterial',
    label: '上传材料',
    type: 'studentMaterial'
  }
]
const btnJobOpt = [
  {
    name: '取消',
    btnType: 'info',
    prop: 'cancel'
  },
  {
    name: '提交',
    btnType: 'primary',
    prop: 'submit'
  }
]

const formJobRef = ref(null)
//dialog关闭前的回调
function handleDialogClose() {
  formJobRef.value.reset()
}

async function handleSubmit(data) {
  console.log(data)
  let info = {
    studentAccount: userStore.userInfo.account,
    studentClass: userStore.userInfo.class,
    studentMaterial: data.studentMaterial,
    studentMaterialDesc: data.studentMaterialDesc
  }

  const res = await uploadStudentInternshipMaterialsApi(info)
  showStatusMessage(res)
  dialogTableVisible.value = false
  getTableData()
  handleDialogClose()
}

// 优化文件下载函数
async function handletTableMaterial(data) {
  if (!data.material) {
    ElMessage.warning('文件不存在')
    return
  }

  const loading = ElLoading.service({
    lock: true,
    text: '准备下载...',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  try {
    const response = await axios({
      url: data.material,
      method: 'GET',
      responseType: 'blob',
      onDownloadProgress: (progressEvent) => {
        const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total)
        loading.setText(`下载进度: ${percent}%`)
      }
    })

    const fileName =
      getFileName(response.headers['content-disposition']) || data.material.split('/').pop()
    downloadFile(response.data, fileName, response.headers['content-type'])

    ElMessage.success('下载成功')
  } catch (error) {
    console.error('Download error:', error)
    ElMessage.error('下载失败，请稍后重试')
  } finally {
    loading.close()
  }
}

// 抽取文件名获取逻辑
function getFileName(disposition) {
  if (!disposition) return null
  const matches = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)
  if (matches && matches[1]) {
    return decodeURIComponent(matches[1].replace(/['"]/g, ''))
  }
  return null
}

// 抽取文件下载逻辑
function downloadFile(data, fileName, type) {
  const blob = new Blob([data], { type })
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
}

// 添加文件大小格式化函数
function formatFileSize(bytes) {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
// *******************查找未提交学生*******************
// 提交tab
const submitStatus = ref('已提交')

// 班级切换
function handleClassClick(tab, event) {
  // console.log(activeClass.value);
  submitStatus.value = '已提交'

  getTableData({ studentClass: activeClass.value })
}
// 提交状态切换
function handleSubmitClick(tab, event) {
  // console.log(tab, event)

  console.log(submitStatus.value)

  if (submitStatus.value === '已提交') {
    getTableData()
  } else {
    getUnSubmitData()
  }
}
// 未提交的
const unSubmitData = ref([])
async function getUnSubmitData(obj) {
  // 设置默认分页参数
  const { page = 1, size = 10 } = obj || {}
  console.log(activeClass.value)

  // 1.获取负责班级的学生
  const { data: studentArr } = await getStudentByClassApi({ class: activeClass.value })
  console.log(studentArr)
  //   [
  //     {
  //         "id": 126,
  //         "account": "x212348",//学生账号
  //         "studentNumber": "x212348",
  //         "name": "张4",//学生姓名
  //         "password": "123456",
  //         "class": "2021软件工程本科1班",//学生班级
  //         "phone": "123456789",
  //         "college": "信息工程学院",
  //         "major": "软件工程",
  //         "gender": "男",
  //         "identity": "学生",
  //         "image_url": null,
  //         "internship": 0,
  //         "resume": null,
  //         "status": 0
  //     },
  //     {
  //         "id": 125,
  //         "account": "x212347",
  //         "studentNumber": "x212347",
  //         "name": "张3",
  //         "password": "123456",
  //         "class": "2021软件工程本科1班",
  //         "phone": "123456789",
  //         "college": "信息工程学院",
  //         "major": "软件工程",
  //         "gender": "男",
  //         "identity": "学生",
  //         "image_url": null,
  //         "internship": 0,
  //         "resume": null,
  //         "status": 0
  //     },
  //     {
  //         "id": 124,
  //         "account": "x212346",
  //         "studentNumber": "x212346",
  //         "name": "张2",
  //         "password": "123456",
  //         "class": "2021软件工程本科1班",
  //         "phone": "123456789",
  //         "college": "信息工程学院",
  //         "major": "软件工程",
  //         "gender": "男",
  //         "identity": "学生",
  //         "image_url": null,
  //         "internship": 0,
  //         "resume": null,
  //         "status": 0
  //     },
  //     {
  //         "id": 123,
  //         "account": "x212345",
  //         "studentNumber": "x212345",
  //         "name": "张1",
  //         "password": "123456",
  //         "class": "2021软件工程本科1班",
  //         "phone": "123456789",
  //         "college": "信息工程学院",
  //         "major": "软件工程",
  //         "gender": "男",
  //         "identity": "学生",
  //         "image_url": null,
  //         "internship": 0,
  //         "resume": null,
  //         "status": 0
  //     }
  // ]

  // 2.获取负责班级班级学生需要提交的就业材料
  const { data: employment } = await getStudentEmploymentMaterialApi({ class: activeClass.value })
  // console.log(employment)
  //   [
  //     {
  //         "id": 2,
  //         "material": "http://127.0.0.1:3007/material/73d0252d-988d-4f20-bc85-b483dcbe05a1熟悉总结.docx",
  //         "desc": "三方协议",//就业材料名称
  //         "status": 0
  //     },
  //     {
  //         "id": 3,
  //         "material": "http://127.0.0.1:3007/material/c5a4810f-1956-4421-8363-39e2a02a5f39熟悉总结.docx",
  //         "desc": "就业材料1",
  //         "status": 0
  //     }
  // ]
  // 3.获取已提交实习材料的学生名单
  const { data: studentSubmited } = await getStudentWeeklyByCounselorInfoApi({
    studentClass: activeClass.value
  })

  console.log(studentSubmited)
  //   [
  //     {
  //         "studentAccount": "x212350",
  //         "studentName": "张6",
  //         "studentClass": "2021软件工程本科1班",
  //         "materialName": "三方协议"//就业材料名称
  //     },
  //     {
  //         "studentAccount": "x212350",
  //         "studentName": "张6",
  //         "studentClass": "2021软件工程本科1班",
  //         "materialName": "就业材料1"
  //     },

  // ]

  // 4.根据所有负责学生的名单，与已提交实习材料学生名单和需要提交的实习材料，获取未提交的实习材料的学生名单
  const unSubmitList = []

  // 遍历每个学生
  studentArr.forEach((student) => {
    // 遍历每个需要提交的实习材料
    employment.forEach((material) => {
      // 检查该学生是否已提交该材料
      const hasSubmitted = studentSubmited.some(
        (submitted) =>
          submitted.studentAccount === student.account &&
          submitted.studentMaterialDesc === material.desc
      )

      // 如果未提交，添加到未提交列表
      if (!hasSubmitted) {
        unSubmitList.push({
          studentAccount: student.account,
          studentName: student.name,
          studentClass: student.class,
          materialName: material.desc
        })
      }
    })
  })
  // console.log(unSubmitList);

  // 分页处理
  const startIndex = (page - 1) * size
  const endIndex = startIndex + size
  const paginatedList = unSubmitList.slice(startIndex, endIndex)

  console.log(paginatedList)
  unSubmitData.value = paginatedList
  pagizationToatl.value = unSubmitList.length
}
//导出Excel
async function handlEexport() {
  switch (submitStatus.value) {
    case '已提交':
      SubmitExport()
      break
    case '未提交':
      unnSubmitExport()
      break

    default:
      break
  }
}
async function SubmitExport() {
  const res = await getStudentWeeklyByCounselorInfoApi({
    studentClass: activeClass.value
  })
  console.log(res)

  // 表头中文字段value
  const tableHeaderValues = ['账号', '姓名', '班级', '就业材料名称']
  // 以excel表格的顺序调整后端数据
  const sheetData = res.data.map((item, index) => {
    let obj = {}
    obj = {
      studentAccount: item.studentAccount,
      studentName: item.studentName,
      studentClass: item.studentClass,
      studentMaterialDesc: item.studentMaterialDesc
    }
    return obj
  })
  // 创建一个工作表
  const worksheet = utils.json_to_sheet(sheetData)
  // 创建一个新的工作簿
  const workbook = utils.book_new()
  // 把工作表添加到工作簿
  utils.book_append_sheet(workbook, worksheet, 'Data')
  // 改写表头
  utils.sheet_add_aoa(worksheet, [tableHeaderValues], { origin: 'A1' })
  writeFileXLSX(
    workbook,
    `${dayFormat(new Date())}${activeClass.value}${submitStatus.value}名单导出数据.xlsx`
  )
}
async function unnSubmitExport(){
   // 1.获取负责班级的学生
   const { data: studentArr } = await getStudentByClassApi({ class: activeClass.value })
  // console.log(studentArr);

  // 2.获取负责班级班级学生需要提交的实习材料
  const { data: interShip } = await getStudentEmploymentMaterialApi({ class: activeClass.value })
  // console.log(interShip)

  // 3.获取已提交实习材料的学生名单
  const { data: studentSubmited } = await getStudentWeeklyByCounselorInfoApi({
    studentClass: activeClass.value
  })
  // console.log(studentSubmited);

  // 4.根据所有负责学生的名单，与已提交实习材料学生名单和需要提交的实习材料，获取未提交的实习材料的学生名单
  const unSubmitList = []

  // 遍历每个学生
  studentArr.forEach((student) => {
    // 遍历每个需要提交的实习材料
    interShip.forEach((material) => {
      // 检查该学生是否已提交该材料
      const hasSubmitted = studentSubmited.some(
        (submitted) =>
          submitted.studentAccount === student.account &&
          submitted.studentMaterialDesc === material.desc
      )

      // 如果未提交，添加到未提交列表
      if (!hasSubmitted) {
        unSubmitList.push({
          studentAccount: student.account,
          studentName: student.name,
          studentClass: student.class,
          materialName: material.desc
        })
      }
    })
  })
  console.log(unSubmitList);
  
  const tableHeaderValues = ['账号', '姓名', '班级', '就业材料名称']
  // 以excel表格的顺序调整后端数据
  const sheetData = unSubmitList.map((item, index) => {
    let obj = {}
    obj = {
      studentAccount: item.studentAccount,
      studentName: item.studentName,
      studentClass: item.studentClass,
      materialName: item.materialName,
      
    }
    return obj
  })
  // 创建一个工作表
  const worksheet = utils.json_to_sheet(sheetData)
  // 创建一个新的工作簿
  const workbook = utils.book_new()
  // 把工作表添加到工作簿
  utils.book_append_sheet(workbook, worksheet, 'Data')
  // 改写表头
  utils.sheet_add_aoa(worksheet, [tableHeaderValues], { origin: 'A1' })
  writeFileXLSX(workbook, `${dayFormat(new Date())}${activeClass.value}${submitStatus.value}导出数据.xlsx`)
}
const activeCollege = ref(userStore.userInfo.college)

</script>

<template>
  <div class="job-info-wrapper">
    <div class="content-container">
      <!-- 标题区域 -->
      <div class="page-header">
        <div class="header-left">
          <h2>就业信息管理</h2>
          <span class="subtitle">实习就业信息管理平台</span>
        </div>
        <div class="header-right">
          <el-tag type="info" effect="dark"> 共 {{ pagizationToatl }} 条记录 </el-tag>
        </div>
      </div>

      <!-- 搜索表单 -->
      <div class="search-section">
        <Form
          :data="formData"
          :formOpt="FORM_CONFIG.formModel"
          :btnOpt="FORM_CONFIG.btnOpt"
          @handleForm="handleForm"
          ref="selectFormRef"
        />
      </div>
      <!-- 班级 -->
      <el-tabs v-if="userStore.userInfo.identity !== '管理员'" v-model="activeClass" type="card" class="demo-tabs" @tab-click="handleClassClick">
        <el-tab-pane
          v-for="item in userStore.userInfo.class"
          :key="item"
          :label="item"
          :name="item"
        ></el-tab-pane>
      </el-tabs>
      <el-tabs v-else v-model="activeCollege" type="card" class="demo-tabs" @tab-click="handleClassClick">
        <el-tab-pane
          :label="userStore.userInfo.college"
          :name="userStore.userInfo.college"
        ></el-tab-pane>
      </el-tabs>
      
      <!-- 提交状态 -->
      <el-tabs v-model="submitStatus" @tab-click="handleSubmitClick">
        <el-tab-pane label="已提交" name="已提交"></el-tab-pane>
        <el-tab-pane label="未提交" name="未提交"></el-tab-pane>
      </el-tabs>

      <!-- 表格区域 -->
      <div class="table-section">
        <Table
          v-if="submitStatus == '已提交'"
          :tableData="tableData"
          :columns="columns"
          :options="options"
          @handleTable="handleTable"
          v-loading="loading"
        >
          <template #firstColumn>
            <el-table-column type="index" label="序号" width="80" align="center" fixed="left" />
          </template>

          <!-- 自定义状态列 -->
          <template #status="{ row }">
            <el-tag :type="getStatusType(row.status)" effect="light" class="status-tag">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </Table>
        <Table
          v-if="submitStatus == '未提交'"
          :tableData="unSubmitData"
          :columns="uncolumns"
          @handleTable="handleTable"
        >
          <template #firstColumn>
            <el-table-column type="index" label="编号" width="100" align="center" />
          </template>
        </Table>
      </div>

      <!-- 分页 -->
      <div class="pagination-section">
        <Pagization
          ref="pagizationRef"
          :total="pagizationToatl"
          :page-sizes="[10, 20, 50, 100]"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>

      <!-- 文件预览 -->
      <el-dialog v-model="dialogViewVisible" top="25vh" width="420" @close="handleDialogViewClose">
        <!--表单 -->
        <el-form :model="ruleForm" ref="ruleFormRef" :rules="descRules">
          <el-form-item label="驳回原因" prop="rejectReason">
            <el-input
              type="textarea"
              v-model="ruleForm.rejectReason"
              :rows="2"
              placeholder="请输入驳回原因"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogViewVisible = false">取消</el-button>
            <el-button type="primary" @click="handleReject">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 周记抽屉 -->
      <el-drawer
        v-model="drawerIsShow"
        :title="drawerTitle"
        direction="rtl"
        :before-close="handleClose"
        class="weekly-drawer"
        size="50%"
      >
        <div class="weekly-content">
          <div class="weekly-item">
            <div class="weekly-title">
              <i class="el-icon-check"></i>
              本周完成任务
            </div>
            <div class="weekly-text" v-html="drawerData.task"></div>
          </div>
          <div class="weekly-item">
            <div class="weekly-title">
              <i class="el-icon-date"></i>
              下周计划
            </div>
            <div class="weekly-text" v-html="drawerData.plan"></div>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.job-info-wrapper {
  width: 100% !important;
  min-height: 100%;

  background: #f0f2f5;
  .content-container {
    width: 100% !important;

    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
overflow: scroll;
    .page-header {
      padding: 24px 32px;
      background: linear-gradient(to right, #1890ff08, #1890ff02);
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        h2 {
          color: #1a1a1a;
          font-size: 24px;
          font-weight: 600;
          margin: 0;
          margin-bottom: 8px;
        }

        .subtitle {
          color: #666;
          font-size: 14px;
        }
      }
    }

    .search-section {
      padding: 24px 32px;
      background: #fff;
      border-bottom: 1px solid #f0f0f0;
    }

    .pagination-section {
      padding: 24px 32px;
      border-top: 1px solid #f0f0f0;
      display: flex;
      justify-content: flex-end;
    }
  }
}

// 优化按钮样式，让它更加清爽现代
:deep(.el-button) {
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid transparent;

  // 主要按钮
  &.el-button--primary {
    background: rgba(24, 144, 255, 0.1);
    border-color: rgba(24, 144, 255, 0.2);
    color: #1890ff;

    &:hover {
      background: #1890ff;
      border-color: #1890ff;
      color: white;
      transform: translateY(-1px);
    }
  }

  // 成功按钮
  &.el-button--success {
    background: rgba(82, 196, 26, 0.1);
    border-color: rgba(82, 196, 26, 0.2);
    color: #52c41a;

    &:hover {
      background: #52c41a;
      border-color: #52c41a;
      color: white;
      transform: translateY(-1px);
    }
  }

  // 危险按钮
  &.el-button--danger {
    background: rgba(255, 77, 79, 0.1);
    border-color: rgba(255, 77, 79, 0.2);
    color: #ff4d4f;

    &:hover {
      background: #ff4d4f;
      border-color: #ff4d4f;
      color: white;
      transform: translateY(-1px);
    }
  }

  // 信息按钮
  &.el-button--info {
    background: rgba(134, 144, 156, 0.1);
    border-color: rgba(134, 144, 156, 0.2);
    color: #86909c;

    &:hover {
      background: #86909c;
      border-color: #86909c;
      color: white;
      transform: translateY(-1px);
    }
  }

  // 图标样式
  .el-icon {
    margin-right: 4px;
    font-size: 14px;
  }
}

// 状态标签样式优化
:deep(.status-tag) {
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 13px;

  &.el-tag--success {
    background: rgba(82, 196, 26, 0.1);
    border-color: rgba(82, 196, 26, 0.2);
    color: #52c41a;
  }

  &.el-tag--danger {
    background: rgba(255, 77, 79, 0.1);
    border-color: rgba(255, 77, 79, 0.2);
    color: #ff4d4f;
  }

  &.el-tag--warning {
    background: rgba(250, 173, 20, 0.1);
    border-color: rgba(250, 173, 20, 0.2);
    color: #faad14;
  }
}

// 表格内按钮组样式优化
:deep(.el-table) {
  .cell {
    .el-button + .el-button {
      margin-left: 8px;
    }
  }
}

// 表单控件样式优化
:deep(.el-input) {
  .el-input__wrapper {
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
}

// 周记抽屉样式
.weekly-drawer {
  .weekly-content {
    padding: 24px;

    .weekly-item {
      margin-bottom: 32px;
      background: #fafafa;
      border-radius: 8px;
      padding: 20px;

      .weekly-title {
        font-size: 18px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;

        i {
          color: #1890ff;
          font-size: 20px;
        }
      }

      .weekly-text {
        font-size: 14px;
        line-height: 1.8;
        color: #4a4a4a;
        text-indent: 2em;
      }
    }
  }
}

// 预览对话框样式
.preview-dialog {
  :deep(.el-dialog__header) {
    padding: 20px 24px;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .preview-container {
    padding: 24px;
    background: #fafafa;
    border-radius: 8px;
    height: 800px;
    overflow: hidden;

    iframe,
    embed {
      border: none;
      width: 100%;
      height: 100%;
      border-radius: 4px;
      background: #fff;
    }
  }
}
</style>
